<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">--%>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        /* 头部样式 */
        .header {
            background-color: #333;
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo a {
            color: white;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .nav a {
            color: white;
            text-decoration: none;
            margin-left: 1rem;
        }

        .nav a:hover {
            color: #ddd;
        }

        /* 内容区域样式 */
        .content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }

        /* 消息提示样式 */
        .error-message {
            color: red;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid red;
            border-radius: 4px;
            background-color: #ffe6e6;
        }

        .success-message {
            color: green;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid green;
            border-radius: 4px;
            background-color: #e6ffe6;
        }
    </style>
</head>
<body>

<h2> <a href="http://localhost:8080/shop/index">返回首页</a></h2>
<div class="container mt-5">
    <h1 class="mb-4">我的订单</h1>
    <c:if test="${not empty orders}">
        <table class="table table-striped table-bordered">
            <thead class="thead-dark">
            <tr>
                <th>订单编号</th>
                <th>下单时间</th>
                <th>订单金额</th>
                <th>收货地址</th>
<%--                <th>收货人</th>--%>
                <th>联系电话</th>
                <th>支付方式</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${orders}" var="order">
                <tr>
                    <td>${order.no}</td>
                    <td>${order.addTime}</td>
                    <td>￥${order.totalMoney}</td>
                    <td>${order.address}</td>
                    <td>${order.telphone}</td>
                    <td>${order.payType}</td>
                    <td>
                        <c:choose>
                            <c:when test="${order.status == '0'}">
                                <a href="${pageContext.request.contextPath}/order/order_submit?orderId=${order.id}" class="btn btn-warning btn-sm">去支付</a>
<%--                                <span class="badge badge-warning">待支付</span>--%>
                            </c:when>
                            <c:when test="${order.status == '1'}">
                                <span class="badge badge-success">已支付</span>
                            </c:when>
                            <c:when test="${order.status == '2'}">
                                <span class="badge badge-info">已发货</span>
                            </c:when>
                            <c:when test="${order.status == '3'}">
                                <span class="badge badge-primary">已完成</span>
                            </c:when>
                            <c:otherwise>
                                <span class="badge badge-secondary">${order.status}</span>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td>
<%--                        <a href="${pageContext.request.contextPath}/order/submit?orderId=${order.id}" class="btn btn-primary btn-sm">查看</a>--%>
                        <form action="${pageContext.request.contextPath}/order/delete" method="post">
                            <input type="hidden" name="orderId" value="${order.id}">
                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此订单吗？')">删除</button>
                            <c:if test="${order.status=='1'}">
                                <a href="${pageContext.request.contextPath}/order/invoice?orderId=${order.id}">发票</a>
                            </c:if>
                        </form>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </c:if>
    <c:if test="${empty orders}">
        <p class="text-center text-muted">暂无订单记录。</p>
    </c:if>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>